<template>
  <div>
    <div class="task-head">
      <!-- Standard button -->
      <button type="button" class="btn btn-default" @click="showList('IGNORE')"><i class="glyphicon glyphicon-info-sign"></i><span>忽略项</span></button>

      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
      <button type="button" class="btn btn-warning" @click="showList('UNFINISH')"><i class="glyphicon glyphicon-star-empty"></i><span>待完成</span></button>

      <!-- Indicates a successful or positive action -->
      <button type="button" class="btn btn-success" @click="showList('FINISH')"><i class="glyphicon glyphicon-star"></i><span>已完成</span></button>

      <!-- Indicates a successful or positive action -->
      <button type="button" class="btn btn-success pull-right" @click="showList('ALL')"><i class="glyphicon glyphicon-th-list"></i><span>ALL</span></button>
    </div>

    <div class="task-content">
      <table class="table table-hover">
        <thead>
        <tr>
          <th>#</th>
          <th>名称</th>
          <th>创建时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in dataItems" :class="taskLineStatus(item.status)">
          <th scope="row"><span class="glyphicon" :class="taskStatusGlyphicon(item.status)"></span></th>
          <td><span>{{item.name}}</span></td>
          <td><span>{{item.createDate}}</span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
    export default {
        name: "TaskList",
        methods : {
          initData () {
            return [
              {'name': 'Spring boot源碼', 'createDate' : '20200106', 'status': 'UNFINISH'},
              {'name': 'Spring源碼', 'createDate' : '20200106', 'status': 'FINISH'},
              {'name': 'ELK搭建', 'createDate' : '20200106', 'status': 'IGNORE'},
              {'name': '未知选项', 'createDate' : '20200106', 'status': 'UNKNOW'}
            ]
          },
          getTaskList (condition) {
            var result = []
            for(let item of this.initData()) {
              if (condition(item)) {
                result.push(item)
              }
            }
            return result
          },
          showList (status) {
            var condition = function (item) {
              if (item && status && status == 'ALL') {
                return true
              }
              if (item && status && item.status == status) {
                return true
              }
              return false
            }

            this.dataItems = this.getTaskList(condition)
          },
          taskStatusGlyphicon (status) {
            if (!status || !this.statusStyle[status]) {
              return "glyphicon-wrench";
            }
            return this.statusStyle[status].glyphicon
          },
          taskLineStatus (status) {
            if (!status || !this.statusStyle[status]) {
              return "";
            }
            return this.statusStyle[status].tr
          }
        },
        data() {
          return {
            dataItems: this.initData(),
            statusStyle : {
              'UNFINISH' : {
                'tr' : 'warning',
                'glyphicon' : 'glyphicon-star-empty'
              },
              'FINISH' : {
                'tr' : 'success',
                'glyphicon' : 'glyphicon-star'
              },
              'IGNORE' : {
                'tr' : '',
                'glyphicon' : 'glyphicon-info-sign'
              }
            }
          }
        }
    }
</script>

<style scoped>

</style>
